<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { getRebutListApi, addRebutApi, getRebutOptionsApi } from '@/api/check/rebut/index'
import { useTable } from '@/hooks/web/useTable'
import { ref, unref, reactive, PropType, watch, defineProps } from 'vue'
import Write from './components/Write.vue'
import { RebutType } from '@/api/check/rebut/types'
import { propTypes } from '@/utils/propTypes'
import { Dialog } from '@/components/Dialog'
import { Table, TableColumn } from '@/components/Table'
import { FormSchema } from '@/components/Form'
import { useEventBus } from '@/hooks/event/useEventBus'
import { ElButton } from 'element-plus'

const emits = defineEmits(['update:modelValue'])
const { emit } = useEventBus()

const props = defineProps({
  modelValue: propTypes.bool.def(false),
  params: {
    type: Object as PropType<Nullable<RebutType>>,
    default: () => {}
  },
  action: propTypes.string
})

watch(
  () => props.modelValue,
  (val: boolean) => {
    if (val === unref(dialogVisible)) return
    dialogVisible.value = val
  }
)

const dialogVisible = ref(props.modelValue)
const dialogTitle = ref()

watch(
  () => dialogVisible.value,
  (val: boolean) => {
    emits('update:modelValue', val)
  }
)

watch(
  () => props.params,
  () => {
    console.log(props.action)
    if (props.action != 'add') setSearchParams({ ...props.params })
  },
  { deep: true }
)

watch(
  () => props.action,
  (val: string) => {
    dialogTitle.value = val == 'add' ? '驳回' : '查看驳回历史'
  }
)

const { tableRegister, tableState, tableMethods } = useTable({
  immediate: false,

  fetchDataApi: async () => {
    const res = await getRebutListApi({
      limit: 0,
      ...unref(searchParams)
    })
    return {
      list: res.data,
      total: res.count
    }
  }
})
const { loading, dataList } = tableState
const { getList } = tableMethods

const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}

const { t } = useI18n()

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('common.index'),
    type: 'index',
    width: 80
  },
  {
    field: 'rebut_form_no',
    label: '编号',
    minWidth: 160
  },
  {
    field: 'before_status',
    minWidth: 140,
    label: '从何状态驳回'
  },
  {
    field: 'after_status',
    minWidth: 140,
    label: '驳回至何状态'
  },
  {
    field: 'reason',
    label: '驳回理由',
    minWidth: 180
  },
  {
    field: 'create_datetime',
    label: '驳回时间',
    minWidth: 180
  },
  {
    field: 'create_user',
    label: '操作人',
    minWidth: 100
  }
])

const formSchema = reactive<FormSchema[]>([
  {
    field: 'rebut_type',
    label: '驳回类型',
    hidden: true
  },
  {
    field: 'rebut_form_no',
    label: '编号'
  },
  {
    field: 'before_status',
    label: '现在状态'
  },
  {
    field: 'after_status',
    label: '驳回至',
    component: 'Select',
    optionApi: async () => {
      const res = await getRebutOptionsApi({ ...props.params })
      return res.data
    }
  },
  {
    field: 'reason',
    label: '驳回理由',
    component: 'Input',
    componentProps: {
      type: 'textarea'
    }
  }
])

const writeRef = ref<ComponentRef<typeof Write>>()

const saveLoading = ref(false)

const save = async () => {
  const write = unref(writeRef)
  const formData = await write?.submit()
  if (formData) {
    saveLoading.value = true
    try {
      const res = await addRebutApi(formData)
      if (res) {
        dialogVisible.value = false
        emit('addRebut', res.data)
      }
    } finally {
      saveLoading.value = false
    }
  }
}
</script>

<template>
  <div>
    <Dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      max-height="300px"
      v-if="props.action == 'detail'"
    >
      <Table
        :columns="tableColumns"
        :data="dataList"
        :loading="loading"
        @register="tableRegister"
      />
      <template #footer>
        <ElButton @click="dialogVisible = false">{{ t('common.close') }}</ElButton>
      </template>
    </Dialog>
    <Dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="700px"
      max-height="220px"
      v-if="props.action == 'add'"
    >
      <Write ref="writeRef" :form-schema="formSchema" :current-row="props.params" />
      <template #footer>
        <ElButton type="primary" :loading="saveLoading" @click="save">
          {{ t('common.save') }}
        </ElButton>
        <ElButton @click="dialogVisible = false">{{ t('common.close') }}</ElButton>
      </template>
    </Dialog>
  </div>
</template>
